<template>
    <div>
        <div class="home">首页</div>
            <el-row class="mb-4">
                <el-button class="btn1" type="primary">销量</el-button>
                <el-button class="btn2">销售额</el-button>
            </el-row>
            <el-select class="m-2" placeholder="Select" size="large">
                <el-option :value="1" />
            </el-select>
        <div id="main" style="width: 100%;height:500px;"></div>
        <div class="home-in">全国销量分布图</div>
        <div id="china" style="height:600px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from "vue"
import * as http from "@/request/http"
import { EChartsOption, PieSeriesOption } from 'echarts';
import china from "@/json/china.json"
echarts.registerMap('china', china as any);
onMounted(() => {
    var chartDom = document.getElementById('main')!;
    var myChart = echarts.init(chartDom);

    // 绘制图表
    let option = {
        tooltip: {
            trigger: 'item',
            backgroundColor: "rgba(0,0,0,.3)",
            textStyle: {
                color: '#fff'
            }
        },
        // 图例
        legend: {
            top: 80,
            orient: 'vertical',
            right: 50,
            height: 100,
        },
        series: [
            {
                type: 'pie',
                radius: ['25%', '45%'],
                avoidLabelOverlap: true,
                right: 550,
                top: -30,
                // 高亮扇区
                emphasis: {
                    label: {
                        show: true,
                        fontWeight: 'bold'
                    }
                },
                // 拼图文本
                label: {
                    color: 'inherit'
                },
                data: []
            }
        ],
    };
    // 请求数据
    http.chart.chartHTTP().then((res) => {
        console.log(res.data);
        const pieData = res.data.salePie
        const data = pieData.map(item => ({
            value: item.sale_today
            , name: item.name
        })) as PieSeriesOption[]
        (option.series as PieSeriesOption[])[0].data = data
        myChart.setOption(option);
    })
    // 地图
    let myChartMap = echarts.init(document.getElementById('china')!)
    let option2 = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>销量:{c}',
            backgroundColor: "rgba(0,0,0,.3)",
            textStyle: {
                color: '#fff'
            }
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 0,
            max: 500000,
            calculable: true,
            inRange: {
                color: ["#FDC6C0", "#FB7258", "rgb(253, 91, 43)"]
            }
        },
        series: [
            {
                name: '全国销量分布图',
                type: 'map',
                map: 'china',
                zoom: "1.2",
                // roam:true,
                label: {
                    show: false,
                    fontSize: 0,
                },
                emphasis: {
                    itemStyle: {
                        areaColor: "#8884d8"
                    }
                },
                data: [],
            }
        ]
    }
    // 请求数据
    http.chart.chartHTTP().then((res) => {
        console.log(res.data.saleMap);
        const saleMap = res.data.saleMap
        const saledata = saleMap.map(item => ({
            name: item.areaName,
            value: item.saleNum
        })) as PieSeriesOption[]
        (option2.series as PieSeriesOption[])[0].data = saledata
        // console.log(option2.series[0].data);
        myChartMap.setOption(option2);
    })
})
</script>

<style lang="less" scoped>
.home {
    line-height: 40px;
    padding-left: 20px;
    color: #606266;
    border-bottom: 1px solid #eeeeee;
}

#main {
    border-bottom: 1px solid #eeeeee;
}

.home-in {
    line-height: 60px;
    text-align: center;
}

:deep(.el-row){
    margin-top: 20px;
    float: left;
    margin-left: 20px;
}
:deep(.el-select){
    margin-top: 20px;
    float: right;
    margin-right:20px;
}
:deep(.el-button+.el-button){
    margin-left: 0;
}
:deep(.el-button){
    height: 40px;
    width: 80px;
    border-radius: 0px;
}
:deep(.btn1){
    border-radius: 4px 0 0 4px;
}
:deep(.btn2){
    border-radius: 0 4px 4px 0;
}
</style>